<template>
<div>
  <div style="margin:10px auto;width: 1200px;min-height:700px;display: flex;background-color:white;flex-direction: column;">
    <el-form v-model="task">
      <el-form-item>
      <el-input v-model="task.taskName"></el-input>
      </el-form-item>
    </el-form>
    <div id="div1">
    </div>
    <div id="div2">
    </div>
  </div>
</div>
</template>
<script>
import E from 'wangeditor'
export default{
  name: "DemoWangEditor",
  data(){
    return{
      task:{"taskName":'',"content":'xxxx',"answer":'hhh'}
    }
  },
  methods:{
    //创建富文本编辑器，并进行上传图片、上传视颜的配置
    createRichTextEditor() {
      this.editor1 = new E('#div1');
      this.editor1.config.uploadImgServer = 'http://localhost:8089/richText/uploadFile?type=img';
      this.editor1.config.uploadFileName = 'file';
      this.editor1.config.uploadVideoServer = 'http://localhost:8089/richText/uploadFile?type=video';
      this.editor1.config.uploadVideoName = 'file';
      this.editor1.config.placeholder = '请在此处填写作业内容';
      this.editor1.config.zIndex=500
      this.editor1.create();
      this.editor2 = new E('#div2');
      this.editor2.config.uploadImgServer = 'http://localhost:8089/richText/uploadFile?type=img';
      this.editor2.config.uploadFileName = 'file';
      this.editor2.config.uploadVideoServer = 'http://localhost:8089/richText/uploadFile?type=video';
      this.editor2.config.uploadVideoName = 'file';
      this.editor2.config.placeholder = '请在此处填写作业答案';
      this.editor2.config.zIndex=500
      this.editor2.create();
    },
    //确定按钮
    addOrUpdate(formName) {
      this.task.content=this.editor1.txt.html();
      this.task.answer=this.editor2.txt.html();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.updateTask(this.task);
          setTimeout(() =>
                  this.$router.go(0)
              , 300)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  created() {
    this.$nextTick(() => {
      if (!this.editor1) {
        this.createRichTextEditor();
      }
    });
  },
  beforeMount() {
    if (!this.taskShow) {
      if (this.task.content !== null)
        this.editor1.txt.html(`${this.task.content}`);
      if (this.task.answer !== null)
        this.editor2.txt.html(`${this.task.answer}`);
    }
  }
}
</script>

<style scoped>

</style>